<template>
	<div class="flex items-center justify-between">
		<div class="flex items-center">
			<base-icon
				v-if="isUseLocalIcon"
				class="mr-1"
				:size="size || 26"
				:color="iconColor"
				:name="img" />
			<img v-else class="w-[20px] h-[20px] mr-[6px] filter-primary" :src="img" />
			<slot name="title">
				<base-text
					:text="text"
					:textT="textT"
					class="app-font-bold text-t-1"
					:class="textClass ? textClass : 'text-[18px]'"></base-text>
			</slot>
		</div>
		<div>
			<slot name="action"></slot>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { BaseText, BaseIcon } from '@/components/base'
defineProps({
	img: {
		type: String,
		default: ''
	},
	size: {
		type: Number,
		default: 0
	},
	iconColor: {
		type: String,
		default: ''
	},
	text: {
		type: String,
		default: ''
	},
	textT: {
		type: [String, Array],
		default: ''
	},
	isUseLocalIcon: {
		type: Boolean,
		default: true
	},
	textClass: {
		type: String,
		default: ''
	}
})
</script>
